import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import { mgop } from '@aligov/jssdk-mgop';
import TextInput from 'rax-textinput';

function UserId() {

    
    const [uid,setUid] = useState('');
    const [name,setName] = useState('');
    const [phoneNumber,setPhoneNumber] = useState('');

     //初始化jsbridge
     const excuteBridge = () => {
    
        ZWJSBridge.onReady(() => { 
          console.log('初始化完成后，执行bridge方法');
        })
      }

    //复制内容到剪贴板
    const doCopy = (param) => {
        excuteBridge();
        ZWJSBridge.setClipboardData({ 
            text: param
        }).then((result) =>{
            console.log('#### ZWJSBridge.setClipboardData() log.result:   ' + result);
            alert("成功复制到剪贴板! " + param);
        }).catch(error => { 
            console.log('#### ZWJSBridge.setClipboardData() error.error:  ' + error);
            alert("复制内容到剪贴板失败");
        });
        console.log('**** exit doCopy() ****');
    }


    const RPCApiTest = () => {
        mgop({ 
                api: 'mgop.wudong.tools.test', // 必须  
                host: 'https://mapi.zjzwfw.gov.cn/',  
                dataType: 'JSON',  
                type: 'GET', 
                appKey: 'e3vs4qv7+2001300640+nbjurk', // 必须  
        onSuccess: data => {   
            setUid(data.data.userId);
            setName(data.data.userName);
            setPhoneNumber(data.data.phone);  
            console.log("mgop run success. data :  " + JSON.stringify(data)); 
        },  
        onFail: err => {     
            
            console.log("mgop run error. error :  " + JSON.stringify(err)); 
            
           alert("获取用户信息失败： " + JSON.stringify(err));
            
        }})
    }
  return (
    <View>
        <div>
            <h1 style={{textAlign:'center',color:'white'}}>获取用户信息</h1>
                <div>
                <button onClick={() => RPCApiTest()}
                            style={{
                                width: 200,
                                height: 40,
                                backgroundColor: '#d0c27d',
                                color: 'white',
                                fontSize: 'small',
                                alignSelf:'center'
                            }}  
                  >获取用户信息</button>
                  <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                  <div>
                                <Text style={{
                                        fontSize: 20,
                                        color:'black'
                                    }}
                            >userId:</Text> 
                        
                        <Text style={{
                                        fontSize: 15,
                                        color:'blue',
                                        textAlign:'center'
                                    }}
                            >{uid}</Text>
                        

                        <div>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </div>
                            <button onClick={() => doCopy(uid)}
                                style={{
                                    width: 200,
                                    height: 40,
                                    backgroundColor: '#d0c27d',
                                    color: 'white',
                                    fontSize: 'small',
                                    alignSelf:'center'
                                }}   
                    >点击复制</button>

<div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                        

                        <span>
                                <Text style={{
                                        fontSize: 20,
                                        color:'black'
                                    }}
                            >姓名:</Text> 

                                <Text style={{
                                        fontSize: 15,
                                        color:'blue',
                                        textAlign:'center'
                                    }}
                            >{name}</Text>
                        </span>

                        <div>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </div>

                        <button onClick={() => doCopy(name)}
                                style={{
                                    width: 200,
                                    height: 40,
                                    backgroundColor: '#d0c27d',
                                    color: 'white',
                                    fontSize: 'small',
                                    alignSelf:'center'
                                }}   
                    >点击复制</button>
                     <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>

                        <span>
                                <Text style={{
                                        fontSize: 20,
                                        color:'black'
                                    }}
                            >手机号:</Text> 

                                <Text style={{
                                        fontSize: 15,
                                        color:'blue',
                                        textAlign:'center'
                                    }}
                            >{phoneNumber}</Text>
                        </span>

                        <div>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                     </div>

                     <button onClick={() => doCopy(phoneNumber)}
                            style={{
                                width: 200,
                                height: 40,
                                backgroundColor: '#d0c27d',
                                color: 'white',
                                fontSize: 'small',
                                alignSelf:'center'
                            }}  
                  >点击复制</button>

                   <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                    

                  </div>

                </div>

        </div>
    </View>
  );
}

export default UserId;
